<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>查询页面</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
</head>
<body>
<div class="container">
<h1>
    查询页面
</h1>
<!--@{}表达式为thymeleaf中定义url的一种表达式，会自动在url-->
<!--<form th:action="@{/Brand/doFindBrands/}" method="get" >   -----传统方式
    <input type="text" name="name">
    <input type="button" onclick="doSearch()" value="Search">
</form>-->
<form class="form-inline">
   <div class="form-group">
       <input type="text" name="name">
       <input type="button" onclick="doSearch()" value="Search">
   </div>
    <button type="button" onclick="doSearch()" class="btn btn-primary btn-sm">Search</button>
    <button type="button" onclick="doAddUI()" class="btn btn-primary btn-sm">Add Brand</button>
</form>

<table class="table">
    <thead>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>createdTime</td>
            <th colspan="2">operation</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="brand:${list}">
            <td th:text="${brand.id}">id</td>
            <td th:text="${brand.name}">name</td>
            <td th:text="${#dates.format(brand.createdTime,'yyyy/MM/dd HH:mm')}">createdTime</td>
            <td ><a th:href="@{/brand/doDeleteById/{id}(id=${brand.id})}">delete</a></td>
            <td>
                <button type="button" th:onclick="doDeleteById([[${brand.id}]])" class="btn btn-danger btn-xs">delete</button>
            </td>
            <td>
                <button type="button" class="btn btn-danger btn-xs">update</button>
            </td>
        </tr>
    </tbody>
</table>
<script>
    function doAddUI() {
        location.href="/brand/doAddUI";
    }

    function doDeleteById(id) {
        //给出提示信息
        if (!confirm("您确认删除吗！！！"))return;//confirm为浏览器中window对象的函数
        //执行删除业务
        location.href=`http://localhost:8080/brand/doDeleteById/${id}`;
    }
    function doSearch() {
        //获取表单中的数据
        var name=document.forms[0].name.value;
        console.log(name)
        var url="http://localhost:8080/brand/doFindBrands/"+name;
        var url=`doFindBrands/${name}`;
        //访问对应的url（这种形式未来AJAX会改成异步）
        location.href=url;
    }
</script>
</div>
</body>
</html>